@import url('./normalize.css');

$primaryColor: #0067ac;
$backGrey: #212529 ;
html {
    font-size: calc(100vw / 119);
    font-family: MicrosoftYaHei;
}
/** 公共头部 **/
header {
    z-index: 10;
    position: fixed;
    width: 100vw;
    top: 0;
    background-color: $primaryColor;
    height: 17.88rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    .header-logo {
        margin: 1.38rem 5rem 0;

        display: flex;
        justify-content: space-between;

        .logo {
            height: 3.44rem;
        }
        .header-cl-btn {
            z-index: 10;
            cursor: pointer;
            width: 3rem;
            height: 3rem;
        }
    }

    .header-des {
        margin: 6.44rem 0 0 5rem;

        .header-des-cont{
            font-size: 2.63rem;
            font-weight: normal;
            font-stretch: normal;
            line-height: 4.5rem;
            letter-spacing: 0rem;
            color: #ffffff;
        }

        .header-des-icon {
            display: inline-block;
            margin-left: 1rem;
        }

    }
}


/**
首页
 */

.home {
    min-width: 100%;
    overflow-x: hidden;
    margin-top: 3rem;
    .banner-container {
        width: 100%;
        height: 67.5rem;

        .banner-item {
            object-fit: cover;
        }
    }

    .data {
        display: grid;
        grid-template-columns: 44.75rem repeat(4,17.13rem);
        grid-template-rows: 28.06rem ;
        background-color: $backGrey;
        .data-tit {
            border-right: 1px solid rgba(255,255,255,.4);
            position: relative;
            .tit-eng {
                position: absolute;
                left: 5rem;
                top: 50%;
                transform: translateY(-50%);
                font-size: 3rem;
                font-weight: normal;
                font-stretch: normal;
                line-height: 3rem;
                color: #ffffff;
                opacity: 0.15;
                writing-mode: vertical-lr;
            }

            .tit-txt {
                position: absolute;
                left: 7.13rem;
                top: 50%;
                transform: translateY(-50%);
                font-size: 3.75rem;
                font-weight: normal;
                font-stretch: normal;
                line-height: 4.5rem;
                letter-spacing: 0.38rem;
                color: #ffffff;
            }

            .tit-data-round {
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                right: 10.94rem;
                height: 13.25rem;
                opacity: 0.38;
            }
            .tit-data-arrow {
                position: absolute;
                right: 8.94rem;
                top: 50%;
                transform: translateY(-50%);

            }
        }

        .data-item{
            overflow: hidden;
            &:not(:last-child) {
                border-right: 1px solid rgba(255,255,255,.4);
            }

            .it-con{
                margin-top: 5.44rem;
                margin-left: 1.81rem;
                display: flex;
                flex-direction: column;
                .it-tit {
                    font-size: 2.25rem;
                    font-weight: normal;
                    font-stretch: normal;
                    line-height: 4.5rem;
                    letter-spacing: 0.23rem;
                    color: rgba(255, 255, 255, 1);

                }

                .data-box {
                    .it-data {
                        font-size: 3.75rem;
                        font-weight: normal;
                        font-stretch: normal;
                        line-height: 4.5rem;
                        letter-spacing: 0.04rem;
                        color: rgba(255, 255, 255, 1);
                    }
                    .it-unit {
                        font-size: 1.88rem;
                        font-weight: normal;
                        letter-spacing: 0.19rem;
                        color: rgba(255, 255, 255, 1);
                    }
                }

            }
        }

    }
}